<template>
  <div class="player">
    <div class="left">
      <img class="disc" src="../assets/img/disc.png" alt="" />
      <img class="cover" :src="coverUrl" alt="" />
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt="" /><span>{{songName}}</span>
      </div>
      <div class="singer">歌手: <span>{{singerName}}</span></div>
      <div class="album">所属专辑: <span>{{albumName}}</span></div>
      <audio class="audio" controls autoplay :src="musicUrl"></audio>
      <ul class="lyric-container">
        <li class="lyric" v-for="(item, index) in lyric" :key="'lyric'+index">{{item | Filter}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        musicUrl: '',
        singerName: '',
        coverUrl: '',
        albumName: '',
        songName: '',
        lyric: [],
      };
    },
    async created() {
      if (!this.$route.params.id) {
        alert("未传入歌曲 id 信息，请检查操作！")
        window.history.back(-1)
        return
      }
      this.musicUrl = `https://music.163.com/song/media/outer/url?id=${this.$route.params.id}.mp3 `
      let songInfo = JSON.parse(window.localStorage.getItem("song"));
      console.log(songInfo);
      this.songName = songInfo.name;
      this.albumName = songInfo.album.name;
      this.singerName = songInfo.artists[0].name;
      let coverUrldata = await this.$axios.get('https://autumnfish.cn/album?id=' + songInfo.album.id);
      console.log(coverUrldata);
      this.coverUrl = coverUrldata.data.album.picUrl
      let lyricdata = await this.$axios.get(`/lyric?id=${this.$route.params.id}`);
      console.log(lyricdata);
      this.lyric = lyricdata.data.lrc.lyric.split('\n');
      console.log(this.lyric);
    },
    filters: {
      Filter(gechu) {
        var str = gechu
        console.log(str);
        var text = gechu;
        text = text.replace(/\[\d{2}\:\d{2}\.\d{2,3}\]/, "");
        console.log(text);
        return text
      }

    }
  };
</script>

<style scoped>
  @import "@/assets/css/player.css";
</style>